<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-03-22 17:34:08
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-04-06 16:39:34
 * @FilePath: \visitor_management\src\components\Toast.vue
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="visible"
    :append-to-body="true"
    :show-close="false"
    width="520px"
    top="40vh"
  >
    <div class="content d-flex jc-center ai-center">
      <img :src="imgUrl" alt="" />
      <div>{{ text }}</div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: "",
    },
    imgUrl: {
      type: String,
      default: "",
    },
    duration:{
      type:Number,
      default:2500
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.onClose()
        }
      },
      immediate: true,
    },
  },
  methods: {
    onClose() {
      setTimeout(() => {
        this.$emit("update:visible", false);
        setTimeout(() => {
          this.$emit("update:text", "");
        }, 500);
      }, this.duration);
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  /deep/ .el-dialog__header {
    height: 0;
    padding: 0;
  }
  .content {
    height: 35px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 15px;
    }
  }
}
</style>
